<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <!-- 
    结构赋值
    相较于常规的赋值方式,结构赋值最主要的是’解构’两个字,在赋值的过程中要清晰的知道等号右边的结构，解构顾名思义就是:解开结构 -->
    <script>

        var div = document.querySelector("div");
        // var x = div.getBoundingClientRect().x;
        // var y = div.getBoundingClientRect().y;
        // var w = div.getBoundingClientRect().width;
        // var h = div.getBoundingClientRect().height;

        var {x,y,width,height} = div.getBoundingClientRect();
        console.log(x);  // 8
        console.log(y);  // 8

        var obj = {
            name:"lili",
            age:18,
        }
        var name = obj.name;
        var age = obj.age;
        console.log(name);   //lili
        console.log(age);    //18
        // 得到obj这个对象中name属性与age属性的值赋值给全局变量name与age
        // 变量名需要与属性名一样

        var {age,name} = obj;
        // 给全局变量定义新的名称 (属性名:变量名) = 对象
        var {age:a,name:n} = obj;
        console.log(n); //lili
        console.log(a); //18

        var arr = [12,23,34,45,["a","b"]];
        console.log(arr[2]); // 34
        var [a,b,c,d,[e,f]] = arr;
        console.log(a);    // 12
        console.log(e);    // a

    // let [a] =[1]   [变量名]:变量名可随意
    // 对象: let {name} = {name}  {变量名}:变量名必须是对象中的属性名
    // 数组:     
    let [a, [b,c], d] = [1, [2, 3], 4];
    console.log(a,b,c,d)
    //1,2,3,4
    //结构和位置一一对应就行了.    
    let [a,b,c] = [1,2,3]; console.log(a,b,c); //1,2,3  // 按顺序
    let [b,a,c] = [1,2,3]; console.log(a,b,c); //2,1,3  // 打乱顺序
    // 数组的是按照位置来进行结构的，所以与变量名字无关
    
//     let {name,sex} = {name:"fanfusuzi",sex:"man"}; console.log(name,sex); //fanfusuzi,man//按顺序： 
//     let {sex,name} = {name:"fanfusuzi",sex:"man"}; console.log(sex,name); //nan,fanfusuzi//打乱顺序: 
//  对象是按照属性名字进行结构的，所以与变量的位置无关
// 不存在的属性名： let {name,age} = {name:"fanfusuzi",sex:"man"}; console.log(name,age); //fanfusuzi,undefined
const obj={
    man:{
      student:{
           name:'ning',
           age:18
        }
   }
}
 
let {man:{student}} = obj //obj里面有个man,然后里面有个student,注意这一行代码里变量就只有一个student,并没有man
console.log(man,student) // undefined,{name:'ning',age:18}
let {man:{student:{name}}} = obj //同理,逐层拿到最后的name值,而且也只有name这一个属性
console.log(name) //ning
 
//如何同时拿到嵌套的每层的数据
let {man,man:{studengt},man:{student:{name}}} = obj
console.log(man,student,name) //{student:{name:'ning',age:18}},{name:'ning',age:18},18

    </script>
</body>
</html>